<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改密码</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>


</head>
<body>
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">修改密码</span>
</div>
<div id="app" v-cloak class="top-container">
    <p style="margin:40px auto;text-align:center;font-size:12px;color:#a8a8a8;">点击“发送验证码”我们将向您当前手机发送一条验证码</p>
    <div class="modifyPwd-row">
        <img v-src="'../../image/modifyPwd_icon_code.png'">
        <input type="number" placeholder="请输入验证码" v-model="code">
        <sendcode style="right:10px" :phone="phone" :type="7"></sendcode>
    </div>
    <div class="modifyPwd-row">
        <img v-src="'../../image/modifyPwd_icon_pwd.png'">
        <input type="password" placeholder="设置新密码" v-model="newPwd" v-show="ifClosed">
        <input type="password" placeholder="设置新密码" v-model="newPwd" v-show="!ifClosed">
        <img class="right" v-src="'../../image/modifyPwd_icon_close.png'" v-show="ifClosed" v-myclick="changeIfClosed" key="close">
        <img class="right" v-src="'../../image/modifyPwd_icon_open.png'" v-show="!ifClosed" v-myclick="changeIfClosed" key="open">
    </div>
    <a class="btn-commit" style="margin-top:50px;" v-myclick="updPassword" v-if="this.btn == 2">提交</a>
    <div class="btn-commit" style="margin-top:50px;background-color: #ccc;" v-if="this.btn == 1">提交</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>

    var vm;
    var user;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        user = JSON.parse(getPrefs('user'));
        initApp();
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
	vm = new Vue({
			el: '#app',
			data: {
					phone: user.phone,
					code: '',
					newPwd:'',
					ifClosed:true,
					btn:1
			},
			computed:{
					text: function () {
							return this.ifClosed ? 'password' : 'text';
					}
			},
			methods:{
					updPassword:function () {
							var data = {
									member_id : getPrefs('member_id'),
									phone:this.phone,
									verify_code:this.code,
									password:this.newPwd
							};
							var callback = function (ret) {
									if(ret.errcode == 0){
											api.alert({
													title: '提示',
													msg: '修改密码成功',
													buttons: ['确定']
											}, function (ret, err) {
													onPageEnd();
													api.closeWin();
											});
									}else{
											api.alert({
													title: '错误',
													msg: ret.message,
													buttons: ['确定']
											}, function (ret, err) {

											});
									}
							};
							pinet.post(URL.changePwd, data, callback);
					},
					changeIfClosed: function () {
							this.ifClosed = !this.ifClosed;
					},
					submitNewPassword: function(){
						if(/^\d{6}$/.test(this.code)){
							this.btn = 2
						}
					}
			},
			watch:{
				code:function(){
					this.submitNewPassword()
				},
			}
	});
}


    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
